﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Script/Lib/jquery.js"></script>
    <script type="text/javascript" src="Script/Lib/jslinq.js"></script>
    <script type="text/javascript" src="Script/Lib/cookies.js"></script>
    <script type="text/javascript" src="Script/Lib/date.js"></script>
    <script type="text/ecmascript" src="Script/Lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/ecmascript" src="Script/Lib/Metro/MetroJs.js"></script>

    <!---->
    <script type="text/javascript" src="Script/config.js"></script>
    <!---->
    <script type="text/javascript" src="Script/builder.js"></script>
    <script type="text/javascript" src="Script/index.js"></script>
    <!---->
    <link rel="stylesheet" href="Script/Lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="Script/Lib/Metro/MetroJs.css" />
    <link href="Style/index.css" rel="stylesheet" />
</head>
<body>
    <div id="head"></div>
    <div class="main">
        <!-- Apply blue theme as default for all tiles -->
        <div id="tiles" class="blue">
            <!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
            <div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
                <span class="tile-title">slide tile (figure 2a)</span>
                <div>
                    <img src="/images/sample/1tw.gif" alt="1" /></div>
                <div>
                    <img src="/images/sample/2t.gif" alt="2" /></div>
            </div>
            <!-- Red Flip Tile that flips every 4 seconds -->
            <div class="red live-tile" data-mode="flip" data-delay="4000">
                <div>
                    <img src="/images/sample/3tw.gif" alt="3" />
                    <a class="tile-title">flip tile front (figure 2b)</a>
                </div>
                <div>
                    <img src="/images/sample/4tw.gif" alt="4" />
                    <a class="tile-title">flip tile back (figure 2b)</a>
                </div>
            </div>
            <!-- Mango Flip List that triggers every 3 seconds -->
            <div class="mango list-tile">
                <span class="tile-title">flip list (figure 2c)</span>
                <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
                    <li>
                        <div>
                            <img src="/images/sample/1t.gif" alt="1" /></div>
                        <div>
                            <img src="/images/sample/1tw.gif" alt="1" /></div>
                    </li>
                    <li>
                        <div>
                            <img src="/images/sample/2t.gif" alt="2" /></div>
                        <div>
                            <img src="/images/sample/2tw.gif" alt="2" /></div>
                    </li>
                    <li>
                        <div>
                            <img src="/images/sample/3t.gif" alt="3" /></div>
                        <div>
                            <img src="/images/sample/3tw.gif" alt="3" /></div>
                    </li>
                    <li data-direction="horizontal">
                        <div>
                            <img src="/images/sample/4t.gif" alt="4" /></div>
                        <div>
                            <img src="/images/sample/4tw.gif" alt="4" /></div>
                    </li>
                </ul>
            </div>
            <!-- Green Static Tile -->
            <div class="green live-tile exclude">
                <span class="tile-title">static tile (figure 2d)</span>
                <p>Static tiles can take advantage of theming too!</p>
            </div>
        </div>
        <!-- Activate live tiles -->
        <script type="text/javascript">
            // apply regular slide universally unless .exclude class is applied 
            // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
            $(".live-tile, .flip-list").not(".exclude").liveTile();
        </script>
    </div>
    <div id="foot"></div>
</body>
</html>
